<script setup lang="ts">
import { ElMessage } from 'element-plus'
import 'element-plus/es/components/message/style/css'
import { promptList } from '~/logic'

const dialogFormVisible = ref(false)
const formEl = ref()

const form = reactive({
  id: '',
  name: '',
  prompt: '>>>数据<<<',
  status: true,
})

const rules = ref({
  name: [
    { required: true, message: '名称不能为空', trigger: 'blur' },
    { min: 3, max: 30, message: '最少3个字符，最大30个字符', trigger: 'blur' },
  ],
  prompt: [
    { required: true, message: '模版不能为空', trigger: 'blur' },
  ],
})

function createdId() {
  return Date.now().toString(36)
}

function add() {
  form.id = ''
  form.name = ''
  form.prompt = '>>>数据<<<'
  form.status = true
  dialogFormVisible.value = true
}

function edit(item) {
  form.id = item.id
  form.name = item.name
  form.prompt = item.prompt
  form.status = item.status
  dialogFormVisible.value = true
}

function del(index: number) {
  // 删除数据
  promptList.value.splice(index, 1)
}

function submit() {
  formEl.value?.validate((valid, fields) => {
    if (valid) {
      // 保存数据
      const list = JSON.parse(JSON.stringify(promptList.value))
      if (form.id) {
        // 编辑 -
        const index = list.findIndex(i => i.id === form.id)
        if (index > -1) {
          promptList.value[index] = {
            id: form.id,
            name: form.name,
            prompt: form.prompt,
            status: form.status,
          }
        }
      }
      else {
        const bool = list.some(i => i.name === form.name)
        if (bool) {
          ElMessage({
            message: '模版名称不能相同！',
            type: 'warning',
          })
          // 提示 - 名字相同
          return
        }
        promptList.value.push({
          id: createdId(),
          name: form.name,
          prompt: form.prompt,
          status: form.status,
        })
      }
      dialogFormVisible.value = false
    }
  })
}
</script>

<template>
  <div class="mb-3">
    <el-button type="primary" plain @click="add">
      + 新增
    </el-button>
  </div>
  <div class="card-list flex justify-center flex-wrap">
    <el-card v-for="(item, index) in promptList" :key="item.name" style="width: 360px" m-2>
      <template #header>
        <div class="card-header text-lg">
          <span>{{ item.name }}</span>
        </div>
      </template>
      <div>
        {{ item.prompt }}
      </div>
      <template #footer>
        <div>
          <el-button type="primary" plain @click="edit(item)">
            编辑
          </el-button>
          <el-popconfirm
            title="数据删除后无法恢复，你确定要删除该数据吗？"
            confirm-button-text="确定"
            cancel-button-text="取消"
            confirm-button-type="danger"
            @confirm="del(index)"
          >
            <template #reference>
              <el-button type="danger" plain>
                删除
              </el-button>
            </template>
          </el-popconfirm>
          <el-switch
            v-model="item.status"
            class="ml-2"
          />
        </div>
      </template>
    </el-card>
  </div>
  <el-dialog v-model="dialogFormVisible" center title="模版" width="500">
    <el-form ref="formEl" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="模版名称" prop="name">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="模版样例" prop="prompt">
        <el-input v-model="form.prompt" type="textarea" rows="5" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" plain @click="submit">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>
